<template>
	<uni-page-wrapper>
		<uni-page-body>
			<uni-view>
				<uni-view class="none" v-if="account === null">
					<uni-image class="noneImg">
						<div :style="getImg()">
						</div>
						<!---->
					</uni-image>
					<uni-view class="addBank" @click="addBank">{{ $t("bank.Add bank") }}</uni-view>
				</uni-view>

				<uni-view class="have" v-else>
					<uni-view class="list">
						<uni-view class="item">
							<uni-view class="name">{{ $t("bank.Holder") }}：{{ account.holder }}</uni-view>
							<uni-view class="num">{{ $t("bank.Card") }}：{{ account.card }}</uni-view>
						</uni-view>
					</uni-view>
					<uni-view class="addBank" @click="changeAccount">{{ $t("bank.Change Your Account") }}</uni-view>
				</uni-view>
			</uni-view>
		</uni-page-body>
	</uni-page-wrapper>
</template>

<script>
	import service from '@/store/service.js'
	export default {
		data() {
			return {
				account: null,
			};
		},
		mounted() {
			service.auth(this, service.api.app_getbank, {}, function(self, res) {
				self.account.holder = res.data.nickname
				self.account.card = res.data.bankcard
			})
		},
		methods: {
			addBank() {
				uni.navigateTo({
					url: '/pages/bank/addbank'
				})
			},
			getImg() {
				return this._i18n.locale == "en" ?
					"background-image: url('/static/img/notList.7ca9007a.png');background-position: 0% 0%;background-size: 100% 100%;background-repeat: no-repeat;" :
					"background-image: url('/static/notList.7ca9007a.png');background-position: 0% 0%;background-size: 100% 100%;background-repeat: no-repeat;";
			},
			changeAccount() {
				uni.showToast({
					icon: 'none',
					title: this.$t('bank.Please contact customer service')
				})
			},
		},
	};
</script>

<style>
	@import url(./bank.css);
</style>
